<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>地址：{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!-- 使用<script setup lang="ts">标签可以代替 setup函数和return语句 name指定组件名 -->
<script setup lang="ts" name="Person123">
// 数据
let name = "张三";
let age = 18;
let tel = 121398493;
let address = "北京";
// 方法
function changeName() {
  name = "zhang-san"; // 注意：这样修改name，页面是没有变化的
  console.log(name); // name被修改了，但是页面没有变化
}
function changeAge() {
  age += 1; //注意：这样修改name，页面是没有变化的
  console.log(age); // name被修改了，但是页面没有变化
}
function showTel() {
  alert(tel);
}
// 不需要写return语句
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
